<template>
  <div style="height: max-content">
    <trace-map
      ref="map"
      :trace="value"
      style="height: 100%; min-height: 900px"
    />
    
    <div
      style="
        padding: 20px;
        position: absolute;
        top: 10px;
        background: white;
        width: fit-content;
        overflow-y: scroll;
        right: 20px;
        border-radius: 12px;
        max-height: 92vh;
      "
      class="mini-scroll"
    >
      <el-collapse-transition @after-appear="setOverflow">
        <div ref="info-comp">
          <el-timeline>
            <el-timeline-item
              v-for="(item, idx) in value"
              :key="item.i"
              :type="'primary'"
              :timestamp="item.trace.start"
            >
              <div>
                <div style="margin-bottom: 12px">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="showDialog(item.i)"
                    >点【{{ idx }}】</el-button
                  >
                  <el-button
                    type="primary"
                    circle
                    icon="el-icon-plus"
                    size="mini"
                    @click="insert(item.i)"
                  ></el-button>
                  <!-- <el-button type="primary" size="mini" @click="item.show = !item.show">{{
                    item.show ? "收起" : "展开"
                  }}</el-button> -->
                  <el-button
                    v-if="idx > 0"
                    type="primary"
                    @click="moveUp(item.i)"
                    size="mini"
                    circle
                    icon="el-icon-top"
                  ></el-button>
                  <el-button
                    v-if="idx < value.length - 1"
                    type="primary"
                    @click="moveDown(item.i)"
                    circle
                    icon="el-icon-bottom"
                    size="mini"
                  ></el-button>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
          <el-button type="primary" @click="insert(null)" size="mini"
            >添加</el-button
          >
        </div>
      </el-collapse-transition>
    </div>

    <el-dialog title="详细信息" :visible.sync="dialogVisible" width="800px">
      <form-create
        :value.sync="item.trace"
        :rule="rule"
        :option="option"
        @update:value="valueChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import TraceMap from "../pages/TraceMap.vue";
import traceRule from "@/assets/trace-info.json";
import trafficRule from "@/assets/traffic.json";
import { generateID, parseConfig } from "@/utils/utils";

import privateRule from "@/assets/家庭暴露.json";
import publicRule from "@/assets/公共场所.json";
import aggRule from "@/assets/集体单位.json";
import partyRule from "@/assets/聚餐暴露.json";
import { getConfigData } from "@/config/config";
import traceTT from "./trace-t.json";
export default {
  components: { TraceMap },
  data() {
    return {
      fapi: {},
      rule: [],
      value: [],
      option: {
        submitBtn: false,
      },
      show: true,
      dialogVisible: false,
      item:{}
    };
  },
  props: {
    trace: {
      type: Array,
      default() {
        return traceTT;
      },
    },
  },
  watch: {},
  model: {
    prop: "trace",
    event: "change",
  },
  methods: {
    valueChange(v) {
      // console.log(this.value);
      this.$emit("change", this.value);
      this.$emit("input", this.value);
      this.$refs.map.updateTrace();
    },
    showDialog(i) {
      let idx = this.value.map((v) => v.i).indexOf(i);
      this.item = this.value[idx]
      this.dialogVisible = true
    },
    moveUp(i) {
      let idx = this.value.map((v) => v.i).indexOf(i);
      if (idx > 0) {
        let value = this.value.splice(idx, 1);
        this.value.splice(idx - 1, 0, value[0]);
        this.valueChange();
      }
    },
    moveDown(i) {
      let idx = this.value.map((v) => v.i).indexOf(i);
      if (idx >= 0 && idx < this.value.length) {
        let value = this.value.splice(idx, 1);
        this.value.splice(idx + 1, 0, value[0]);
        this.valueChange();
      }
    },
    insert(i) {
      if (i === null) {
        this.value.push({
          i: generateID(),
          show: true,
          trace: {
            i: generateID(),
            positions: {
              lon: 118,
              lat: 30,
            },
          },
        });
        return;
      }
      let idx = this.value.map((v) => v.i).indexOf(i);
      if (idx >= 0) {
        // let value = this.value.splice(idx, 1)
        this.value.splice(idx, 0, {
          i: generateID(),
          show: true,
          trace: {
            i: generateID(),
            positions: {
              lon: 30,
              lat: 118,
            },
          },
        });
      }
      this.valueChange();
    },
  },
  mounted() {
    this.rule = [];
    let rule = [];

    rule = rule.concat(
      parseConfig(getConfigData("trace-info", traceRule), {}, this, false)
    );
    rule = rule.concat(
      parseConfig(getConfigData("traffic", trafficRule), {}, this, false)
    );
    rule.push({
      type: "radio",
      field: "地点类型",
      title: "地点类型",
      options: [
        {
          value: "家庭/私人场所",
          label: "家庭/私人场所",
        },
        {
          value: "集体单位",
          label: "集体单位",
        },
        {
          value: "聚餐",
          label: "聚餐",
        },
        {
          value: "其它公共场所",
          label: "其它公共场所",
        },
      ],
      control: [
        {
          value: "家庭/私人场所",
          rule: parseConfig(privateRule, {}, this),
        },
        {
          value: "集体单位",
          rule: parseConfig(aggRule, {}, this),
        },
        {
          value: "聚餐",
          rule: parseConfig(partyRule, {}, this),
        },
        {
          value: "其它公共场所",
          rule: parseConfig(publicRule, {}, this),
        },
      ],
    });
    this.rule = rule;
    this.value = [];
    console.log(this.trace)
    this.trace.forEach((v) => {
      this.value.push({
        i: v.i || generateID(),
        trace: v.trace,
      });
    });
  },
};
</script>

<style>
</style>